<template>
  <div>
    <div class="title">
      <div class="partOne">最近播放</div>
      <div class="partTwo">共{{ songTotal }}首</div>
      <div class="partThree" @click="togHistoryList">
        <el-button type="danger" plain v-remove-focus
          >切换列表/<span v-if="togList">weekData</span
          ><span v-else>allData</span></el-button
        >
      </div>
    </div>

    <div>
      <el-table
        :data="recentlyPlayInfo"
        @row-dblclick="playSong"
        style="width: 100%"
        stripe
        highlight-current-row
        v-double-click
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="name" label="音乐标题" width="420">
        </el-table-column>
        <el-table-column prop="artistname" label="歌手" width="320">
        </el-table-column>
        <el-table-column prop="playCount" label="播放次数">
          <!-- <template slot-scope="scope">
            {{ scope.row.playCount | timeFilter }}
          </template> -->
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      recentlyPlayInfo: [],
      songTotal: '0',
      togList: 1,
    }
  },
  computed: {
    ...mapState(['userId']),
  },
  created() {
    this.routerIsActiveInfo()
    this.getRecentlyPlaySongList()
  },
  methods: {
    ...mapMutations(['changeIsActive', 'changeMusicPlayInfo']),

    // 子传父函数，接收传递过来的 侧边栏信息
    routerIsActiveInfo() {
      const isActive = 'recently'
      this.changeIsActive(isActive)
    },
    //   获取最近播放音乐列表
    async getRecentlyPlaySongList() {
      const { data: res } = await this.$http({
        url: `/user/record?uid=${this.userId}&type=${this.togList}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      if (this.togList) {
        this.getSonglistAboutInfo(res.weekData)
        this.songTotal = res.weekData.length
      } else {
        this.getSonglistAboutInfo(res.allData)
        this.songTotal = res.allData.length
      }
    },
    // 提取歌单列表要用的相关信息的相关信息
    getSonglistAboutInfo(list) {
      let tmepListDatas = []

      let index = 0
      list.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 音乐播放次数 playCount
         * 音乐艺术家 artistname
         */
        listObj.id = item.song.id
        listObj.time = item.song.dt
        listObj.name = item.song.name
        listObj.album = item.song.al.name
        listObj.picUrl = item.song.al.picUrl
        listObj.playCount = item.playCount

        let str = ''
        for (let i = 0; i < item.song.ar.length; i++) {
          str = str + item.song.ar[i].name
          if (i != item.song.ar.length - 1) {
            str = str + '/'
          }
        }

        listObj.artistname = str
        listObj.index = index
        index++

        return tmepListDatas.push(listObj)
      })

      this.recentlyPlayInfo = tmepListDatas
      //   console.log(this.recentlyPlayInfo)
    },
    // 播放歌曲
    playSong(row) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = this.recentlyPlayInfo

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
    // 切换最近播放列表
    togHistoryList() {
      if (this.togList) {
        this.togList = 0
        this.getRecentlyPlaySongList()
        return
      }
      this.togList = 1
      this.getRecentlyPlaySongList()
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  padding: 28px;
  position: relative;

  > .partOne {
    font-weight: 900;
    font-size: 20px;
    margin-right: 10px;
  }
  > .partTwo {
    font-size: 16px;
    color: #9f9f9f;
    position: relative;
    top: 3.2px;
  }
  > .partThree {
    position: absolute;
    right: 80px;
    .el-button {
      padding: 8px 12px;
      font-size: 16px;
    }
  }
}

/deep/ .el-table::before {
  height: 0px;
}
</style>